{include file="common/header"}

<style type="text/css">
    .main {
        margin: 0 auto;
        width: 841.89px;
        padding: 10px;
        border: 1px solid black;
    }

    .title {
        padding-top: 30px;
        display: inline-block;
        height: 100px;
    }

    .title>img {
        width: 86px;
        float: left;
        display: block;
        position: relative;
        height: 86px;
        margin-right: 30px;
    }

    .title>span {
        font-size: xx-large;
        font-family: cursive;
        height: 86px;
        line-height: 86px;
    }

    .message {
        display: -webkit-box;
        padding: 10px 140px;
    }

    .message>div>img {
        width: 100px;
        height: 140px;
    }

    .table_l {
        width: 50%;
        /* padding-left: 100px; */
    }

    .score {

        border: 1px solid black;
        padding: 10px;
        padding-left: 100px;
        margin-top: 20px;
    }

    .footer {
        display: inline-flex;
        margin-top: 20px;
    }

    .footer_l {
        margin-left: 100px;
    }

    .footer_r {
        margin-left: 400px;
        letter-spacing: 15px;
    }
    .p_img{
        border: 1px solid black
    }
    .p_img > img{
        opacity: 0
    }
</style>
<a id="renderPdf">
    <img src="$gqt/admin/image/pdf.png" alt="">
</a>


<div class="main" id="person">
    <center>
        <div class="title">
            <img src="/GQT/public/static/image/index/logo.png" alt="logo">
            <span>综 合 测 评 得 奖 证 明 表</span>
        </div>
    </center>
    <hr style="border-style: groove">
    <div class="message">
        <div class="table_l">
            <table>
                <tr>
                    <td>&nbsp姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</td>
                    <td>&nbsp&nbsp{{personal[0].name}}</td>
                </tr>
                <tr><td>&nbsp</td></tr>
                <tr>
                    <td>&nbsp学&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</td>
                    <td>&nbsp&nbsp{{personal[0].stu_id}}</td>
                </tr>
                <tr><td>&nbsp</td></tr>
                <tr>
                    <td>&nbsp性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：</td>
                    <td>&nbsp&nbsp{{personal[0].sex}}</td>
                </tr>
                <tr><td>&nbsp</td></tr>
                <tr>
                    <td>&nbsp系&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：</td>
                    <td>&nbsp&nbsp{{Depart[personal[0].class]}}</td>
                </tr>
            </table>
        </div>
        <div class="p_img">
            <img src="/GQT/public/static/image/index/logo.png" alt="个人照片">
        </div>
    </div>
    <hr>
    <div class="score">
        <table>
            <tr>
                <td>德 育：</td>
                <td></td>
            </tr>
            <tr v-for="(e,index) in varture ">
                <td></td>
                <td>{{index+1}}.&nbsp{{e.name}}</td>
            </tr>
            <tr></tr>
            <tr>
                <td>智 育：</td>
                <td></td>
            </tr>
            <tr v-for="(e,index) in wit ">
                <td></td>
                <td>{{index+1}}.&nbsp{{e.name}}</td>
            </tr>
            <tr></tr>
            <tr>
                <td>体 育：</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <tr v-for="(e,index) in sports ">
                    <td></td>
                    <td>{{index+1}}.&nbsp{{e.name}}</td>
                </tr>
            <tr></tr>
            <tr>
                <td>其 他 荣 誉：</td>
                <td></td>
            </tr>
            <tr v-for="(e,index) in other ">
                <td></td>
                <td>{{index+1}}.&nbsp{{e.name}}</td>
            </tr>
        </table>
    </div>
    <div class="footer">
        <div class="footer_l">
            <span>（院）系公章</span>
        </div>
        <div class="footer_r">
            <span>年 月 日</span>
        </div>
    </div>

    <hr style="border-style: double">


</div>
</center>
<script>
    $('#example-navbar-collapse>ul>li').removeClass('active')
    $($('#example-navbar-collapse>ul>li')[3]).addClass('active')
    var person = new Vue({
        el: '#person',
        data: {
            personal: [],
            varture: [],
            wit: [],
            sports: [],
            other: [],
            Depart:{
                '1' : '地震科学系',
                '2' : '防灾工程系',
                '3' : '防灾仪器系',
                '4' : '灾害信息工程系',
                '5' : '经济管理系',
                '6' : '人文社科系',
                '7' : '外语系',
            }
        },
        mounted: function () {
            this.getData()
        },
        methods: {
            getData: function () {
                
                var user_name = document.cookie.substring(7);         
                $.getJSON('/GQT/public/index/Export/get_person', function (data) {
                    for (var i = 0; i < data.length; i++) {
                        person.personal.push(data[i])                        
                        var x = person.personal[0].class
                        x = x.toString()
                        x = x.substring(4,5)
                        y = person.personal[0].class = x
                    }                
                })
                
                $.getJSON('/GQT/public/index/Export/get_varture', function (data) {
                    for (var i = 0; i < data.length; i++) {
                        person.varture.push(data[i]);
                        
                    }
                })
                $.getJSON('/GQT/public/index/Export/get_wit', function (data) {
                    for (var i = 0; i < data.length; i++) {
                        person.wit.push(data[i]);
                        console.log(data[i])
                    }
                })
                $.getJSON('/GQT/public/index/Export/get_other', function (data) {
                    for (var i = 0; i < data.length; i++) {
                        person.other.push(data[i]);
                    }
                })
            }
        }

    })
</script>
<script type="text/javascript" src="$gqt/admin/js/html2canvas.js"></script>
    <script type="text/javascript" src="$gqt/admin/js/jsPdf.debug.js"></script>
    <script type="text/javascript">

      var downPdf = document.getElementById("renderPdf");

      downPdf.onclick = function() {
          html2canvas(document.getElementsByClassName("main"), {
              onrendered:function(canvas) {

                  //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);

                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');

                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 100,595.28,592.28/canvas.width * canvas.height );

                  pdf.save('content.pdf');
                   $('renderPdf').remove(); //最后将iframe删除  

              },
              background: "#FFFFFF",//这里给生成的图片默认背景，不然的话，如果html根节点没有设置背景的话，会用黑色填充。  
            taintTest: false,  
            allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas  
          })
      }
    </script>


{include file="common/footer"}